<template>

  <div>

    <el-button type="success" icon="el-icon-plus" @click="a">新增</el-button>
    <el-table
        :data="tableData"
        stripe
        border>

      <el-table-column
          label="编号"
          prop="uid">
      </el-table-column>

      <el-table-column
          label="用户类型"
          prop="usertype.typename">
      </el-table-column>

      <el-table-column
          label="姓名"
          prop="username">
      </el-table-column>

      <el-table-column
          label="密码"
          prop="password">
      </el-table-column>

      <el-table-column label="头像" align="center" width="200px">
        <template slot-scope="scope">
          <el-popover placement="right" trigger="click">
            <div class="row_reserve">
              <img class="big-img" :src="'data:image/*;base64,'+scope.row.photo" />
            </div>
            <div slot="reference">
              <el-tooltip
                  class="item"
                  effect="light"
                  content="单击放大"
                  placement="left"
              >
                <img class="td-img" :src="'data:image/*;base64,'+scope.row.photo" />
              </el-tooltip>
            </div>
          </el-popover>
        </template>
      </el-table-column>


      <el-table-column>
        <template slot-scope="scope">
          <el-button @click="update(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        title="提示"
        :visible.sync="display"
        width="30%"
        :before-close="handleClose">
      <span>
          <el-form>
            <el-form-item>
                <el-input v-show="false" v-model="user.uid"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="user.utype">
                  <el-option v-for="(ty,index) in type" :key="index" :label="ty.typename" :value="ty.utid.toString()"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户姓名">
                <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input show-password v-model="user.password"></el-input>
            </el-form-item>

            <el-form-item>
               <i class="el-icon-upload" ></i>
              <input type="file"  class="upload-demo" ref="myFile" >
            </el-form-item>


          </el-form>
        </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="display = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>

    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "User",
  data(){
    return {
      imageUrl: '',
      display: false,
      tableData:[],
      user:{},
      type:{},
      utid:'',
    }
  },
  created() {
    this.findAll();
    this.findType();
  },
  methods:{
    a(){
      this.user={}
      this.display=true;
    },
    update(obj){
      this.user=obj;
      // this.utid=this.type.utid
      // this.user.utype=Number(this.utid)
      this.display=true;
    },
    save(){
      let myFile = this.$refs.myFile;
      let files =myFile.files;
      var file = files[0];
      var formData = new FormData();
      formData.append("head",file);
      formData.append("username",this.user.username);
      formData.append("utype",this.user.utype);
      formData.append("password",this.user.password);
      if(this.user.uid!=null){
        formData.append("uid",this.user.uid);
      }
      console.log(formData)
      axios({
        url: 'user/save',
        method: 'post',
        data: formData,
        headers:{ 'Content-Type':'multipart/form-data'}
      }).then(resp => {
        if(resp.data.flag){
          this.$message.success("成功！");
          this.findAll();
          this.display=false;
          this.user={}
        }else{
          this.$message.error("失败！");
        }
      })
    },
    findAll(){
      axios.get("user/users").then(resp =>{
        if(resp.data.flag) {
          console.log(resp.data.data)
          this.tableData = resp.data.data;
        }
      })
    },
    findType(){
      axios.get("user/type").then(resp=>{
        if(resp.data.flag){
          this.type=resp.data.data
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },

  },
}
</script>

<style scoped>
.td-img {
  width: auto;
  height: 100px;
  border-radius: 10px;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
  background: transparent;
}
.big-img {
  width: auto;
  height: 300px;
  border-radius: 10px;
  padding: 0px;
  margin: 0px;
  background: transparent;
}
</style>